<template>
  <div>
      <left></left>
      <div class="right" v-loading="loading">
          <div style="height: 91px; border-bottom: 1px solid rgb(227, 232, 241); width: 100%; padding: 0 30px;" class="flexbc">
              <div class="flexcc fanhui" @click="back">
                  <div><i class="el-icon-arrow-left" style="margin-right: 5px;"></i></div>
                  <div>返回</div>
              </div>
              <top></top>
          </div>
          <div style=" padding: 37px 30px 0 30px; height: calc(100vh - 91px); overflow: auto;">
              <div class="flex" style="justify-content: space-between;">
                <div class="t_choose_tab_box">
                  <div @click="changestatus('0')" :class="{t_tab_title_lei:all ==0}" class="t_tab_title">
                    商品管理
                    <div class="t_under_line" :class="{t_under_line_lei:all ==0}"></div>
                  </div>
                  <div @click="changestatus('1')" :class="{t_tab_title_lei:all ==1}" class="t_tab_title" style="margin-left: 40px;margin-right: 70px; position: relative;">
                    分类管理
                    <div class="t_under_line" :class="{t_under_line_lei:all ==1}"></div>
                  </div>
                </div>
                <div>
                  <el-button v-if="all=='0'" type="primary" round icon="el-icon-circle-plus-outline" @click="piliangFenlei">批量分类</el-button>
                  <el-button v-if="all=='1'" type="primary" round icon="el-icon-circle-plus-outline" @click="addFenlei">添加分类</el-button>
                </div>
              </div>
              <!-- 商品管理table -->
              <el-table v-if="all=='0'" :data="list" style="width: 100%" :header-cell-style="{background:'#FFFFFF',color:'#404247'}"
                row-key="id"
                @select="handleCheckBox"
                @select-all="handleSelectAll"
                >
                <el-table-column
                  type="selection"
                  width="55"
                  key="table_1"
                  :reverse-selection="true"
                  >
                </el-table-column>
                <el-table-column  key="table_2"  label="商品名称" >
                  <template slot-scope="scope">
                    <div style="position: relative">
                        <img :src="scope.row.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" alt="" style="width: 72px;height:72px;border-radius: 10px">
                        <div style="position: absolute;top: 50%;transform: translateY(-50%);left: 35%;">
                          {{  scope.row.title }}{{scope.row.id}}
                        </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column  key="table_3" prop="created_at" label="创建时间" ></el-table-column>
                <el-table-column  key="table_5" label="所属分类" >
                  <template slot-scope="scope">
                    <div  style="display:flex">
                      <div v-for="(item,index) in scope.row.category" :key="index" style="margin-right: 10px" >
                        {{ item.name }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column  key="table_6" label="操作">
                  <template slot-scope="scope">
                      <div  @click="selectCategory(scope.row)" style="color: rgb(0, 90, 255);cursor: pointer">选择分类</div>
                  </template>
                </el-table-column>
                <el-table-column width="50px">
                  <el-tooltip popper-class="fenleiguanli-tooltip" effect="dark" content="可上下拖动" placement="top" :visible-arrow=false >
                    <img src="../../../static/img/tuodong.png" style="height: 24px; border-radius: 16px; cursor: pointer;">
                  </el-tooltip>
                </el-table-column>
              </el-table>
              <!-- 分类管理table -->
              <!-- <el-table v-if="all=='1'":data="list1" style="width: 100%" :header-cell-style="{background:'#FFFFFF'}" row-key="id" @cell-mouse-enter="enterSelectionRows" @cell-mouse-leave="leaveSelectionRows"> -->
              <el-table v-if="all=='1'" :data="list1" style="width: 100%" :header-cell-style="{background:'#FFFFFF'}" row-key="id" >
                <el-table-column  prop="name" label="分类名称">
                  <template slot-scope="scope">
                    <el-input v-model="scope.row.name"
                      :disabled="isdisabledShow(scope.row)"
                      @input="handleEnter(scope.row)"

                      >
                    </el-input>
                  </template>
                </el-table-column>
                <el-table-column key="table_3" prop="created_at" label="创建时间"></el-table-column>
                <el-table-column label="当前商品数量">
                  <template slot-scope="scope">
                    <div style="color: rgb(0, 90, 255); cursor: pointer" @click="dangqianGoodsNum(scope.row)">{{ scope.row.page_num }}</div>
                  </template>
                </el-table-column>
                <el-table-column label="屏蔽显示">
                  <template slot-scope="scope">
                    <!-- is_shield 0 未被屏蔽 1 已屏蔽 -->
                    <div><el-switch v-model="scope.row.is_shield" @change="gengxinautogrounding(scope.row)" style="width: 85px; height: 41px;" active-color="rgb(0, 90, 255);" inactive-color="rgb(246, 248, 251);" :active-value="1" :inactive-value="0"></el-switch></div>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                      <div @click="deleteCategory(scope.row)" style="color: rgb(0, 90, 255); cursor: pointer">删除分类</div>
                  </template>
                </el-table-column>
                <el-table-column width="50px">
                  <el-tooltip popper-class="fenleiguanli-tooltip" effect="dark" content="可上下拖动" placement="top" :visible-arrow=false >
                    <img src="../../../static/img/tuodong.png" style="height: 24px; border-radius: 16px; cursor: pointer;">
                  </el-tooltip>
                </el-table-column>
              </el-table>

              <!-- <el-pagination v-if="all=='0'" style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search.page"
              @current-change="fanye" :page-size="search.page_Size" :total="total"></el-pagination> -->
              <!-- <el-pagination v-if="all=='1'" style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search1.page"
              @current-change="fanye" :page-size="search1.page_Size" :total="total1"></el-pagination> -->

              <!-- <footers></footers> -->
          </div>
      </div>
      <!-- 添加分类弹窗 -->
      <el-dialog title="添加分类" :visible.sync="tianjiafenleiDialog" width="500px" :close-on-click-modal="false" :close-on-press-escape="false">
        <div>
          <el-input v-model="name" style="width: 377px" placeholder="请添加分类"></el-input>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button round @click="makeSureUndo">取消</el-button>
          <el-button type="primary" round @click="makeSureAdd">确认</el-button>
        </div>
      </el-dialog>
      <!-- 选择分类/批量分类弹窗 -->
      <el-dialog :title="categorytitle" :visible.sync="piliangfenleiDialog" width="800px" :close-on-click-modal="false" :close-on-press-escape="false" @close="handleClose">
        <div>
          <span style="float: left;margin-right: 30px;font-weight: bold;">选择分类:</span>
          <div style="margin-left: 90px">
            <el-checkbox-group v-model="checkList" >
              <!-- <el-checkbox label="热销产品"></el-checkbox>
              <el-checkbox label="限时推荐"></el-checkbox>
              <el-checkbox label="电信"></el-checkbox>
              <el-checkbox label="移动"></el-checkbox>
              <el-checkbox label="联通"></el-checkbox>
              <div style="margin-top: 10px;margin-left: 89px;">
                <el-checkbox label="推荐产品"></el-checkbox>
                <el-checkbox label="限时秒杀"></el-checkbox>
              </div> -->
              <div style="display: flex;flex-wrap: wrap;">
                <el-checkbox
                  v-for="item in checkedList"
                  :label="item.name"
                  :key="item.id"
                  :value="item.id"
                  @change="changeObj"
                  style="margin-bottom: 15px;width: 20%;"
                  >
                  {{ item.name }}
                </el-checkbox>
              </div>
            </el-checkbox-group>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button round @click="makeSureUndoP">取消</el-button>
          <el-button type="primary" round @click="makeSureAddP">确认</el-button>
        </div>
      </el-dialog>
      <!-- 热销产品弹窗 -->
      <el-dialog :title="titlename" :visible.sync="rexiaoDialog2" width="1327px" height="888px" :close-on-click-modal="false" :close-on-press-escape="false" class="dialog1">
        <div class="flexc" style="justify-content:space-between;margin-bottom: 20px;">
          <div class="flexc">{{fenleinname}}{{total2}}个</div>
          <el-button class="flexc" type="primary" round icon="el-icon-delete" @click="rexiaoPiliangshanchu">批量删除</el-button>
        </div>
        <div>
          <el-table :data="list2" style="width: 100%" height="400px":header-cell-style="{background:'#FFFFFF'}" ref="typeTable"
            row-key="getRowKeys2"
            @select="handleCheckBox2"
            @select-all="handleSelectAll2"
            >
            <el-table-column
              type="selection"
              width="55"
              key="table_1"
              :reverse-selection="true"
              >
            </el-table-column>
            <!-- <el-table-column  key="table_2" prop="title" label="商品名称"></el-table-column> -->
            <el-table-column  key="table_2"  label="商品名称" width="350">
                  <template slot-scope="scope">
                    <div style="position: relative">
                        <img :src="scope.row.image1 || 'https://91haoka.cn/gth/static/img/kenan.jpg'" alt="" style="width: 72px;height:72px;border-radius: 10px">
                        <div style="position: absolute;top: 50%;transform: translateY(-50%);left: 35%;">
                          {{  scope.row.title }}
                        </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column  key="table_3" prop="created_at" label="创建时间" ></el-table-column>
                <el-table-column  key="table_5" label="所属分类" width="550">
                  <template slot-scope="scope">
                    <div  style="display:flex">
                      <div v-for="(item,index) in scope.row.category" :key="index" style="margin-right: 10px;" >
                        {{ item.name }}
                      </div>
                    </div>
                  </template>
                </el-table-column>
            <!-- <el-table-column  key="table_6"  label="选择分类">

              <template slot-scope="scope">
                <div>
                  <el-dropdown trigger="click" @command="commandHandle" :hide-on-click="false">

                    <div style="width:105px;height:34px;background-color:#FFFFFF;border: 1px solid #EEEEEE;border-radius:8px">
                      <div  @click="selectFenlei(scope.row)" style="color: rgb(0, 90, 255);
                        cursor: pointer;
                        display:flex;
                        align-items: center;
                        justify-content: center;
                        transform: translate(-50%, -50%);
                        left: 50%;
                        position: relative;
                        top: 50%;
                        font-size:14px;
                        color:#606266;
                        font-weight:bold">选择分类
                        <span class="dropdown-triangle"></span>
                      </div>
                    </div>

                    <el-dropdown-menu  slot="dropdown"  :append-to-body="false">

                      <el-checkbox-group v-model="checkboxs" @change="handleCheckedCitiesChange">
                        <el-dropdown-item v-for="item in allcategory" :key="item.id" >
                          <el-checkbox :label="item.name"  @change="headerChange(item,$event)">{{item.name}}</el-checkbox>
                        </el-dropdown-item>
                      </el-checkbox-group>
                    </el-dropdown-menu>
                  </el-dropdown>
                </div>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div  class="flexc" style="justify-content: space-between">
          <div class="flexc">
            <el-pagination  style="text-align: right; padding: 20px;" background layout="prev,pager,next,total,jumper" :current-page="search2.page"
              @current-change="fanye2" :page-size="search2.page_Size" :total="total2">
            </el-pagination>
          </div>
          <div class="flexc">
            <el-button round @click="makeSureUndoR">取消</el-button>
            <el-button type="primary" round @click="makeSureAddR">确认</el-button>
          </div>
        </div>
      </el-dialog>
  </div>
</template>

<script>
import _ from 'lodash';
import left from '../left.vue'
import draggable from 'vuedraggable';
import Sortable from 'sortablejs';
    export default {
        name: 'fenleiguanli',
        components:{
          left,draggable,Sortable
        },
        data() {
          return {
              search:{
              page:1,
              pageSize:2000
              },
              search1:{
              // page:1,
              // page_Size:20,
              // order_no:'',
              is_all:'1'
              },
              search2:{
              page:1,
              page_Size:200
              },
              list:[],
              total:1,
              list1:[],
              list2:[],
              total1:1,
              total2:1,
              all:'0', //0商品管理   1分类管理
              tianjiafenleiDialog:false,
              piliangfenleiDialog:false,
              name:'',
              checkList:[],
              checkedList:[],
              selectExportId: [], // 多选表格的id
              selectExportId2: [], //热销产品弹窗中多选表格的id
              categorytitle:'',
              rexiaoDialog:false,
              rexiaoDialog2:false,
              rowShangpinId:'',
              checkedAlarmObjIdArr: [],
              alarmObj: [],
              isdisabled:false,
              titlename:'',
              checked:false,
              fenleiId:'',
              fenleinname:"",
              loading:true
            }
        },
        created() {
          this.getlist()
        },
        mounted() {
          // if(this.all=='1'){
          //   this.rowDrop()
          // }
          this.rowDrop()
        },
        methods: {
          gengxinautogrounding:function(item){
            axios.post('/own/category/shield',{category_id:item.id}).then((response)=>{
              if (response.data.msg.code == 0) {
                this.getlist()
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          },
          getlist:function(){
            axios.get('/own/category/page/list',{params:this.search}).then((response)=>{
              if (response.data.msg.code == 0) {
                this.list = response.data.data.data
                console.log(this.list)
                this.total = response.data.data.total
                this.$nextTick(()=>{
                  this.list.forEach((item, index) => {
                    if (this.selectExportId.findIndex((i) => i === item.id) >= 0) {
                      this.$refs.typeTable.toggleRowSelection(
                        this.$refs.typeTable.data[index],
                        true
                      );
                    }
                  })
                  this.loading = false
                })
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          },
          fanye:function(val){

              this.search.page = val
              this.getlist()

          },
          fenleiguanliTab(){
            axios.get('/own/category/list',{params:this.search1}).then((response)=>{
              if (response.data.msg.code == 0) {
                this.list1 = response.data.data
                // this.total1 = response.data.data.total
                this.loading = false
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          },
          //切换tab页
          changestatus(val){
              this.all = val
              if(val==0){
              this.search.page = 1
              this.getlist()
              // this.rowDrop();
              }
              if(val==1){
              this.fenleiguanliTab()
              // this.rowDrop();

              }
          },
          back(){
              this.$router.back(-1)
          },
          clickDetails(row){
              // console.log('row',row)
          },
          //添加分类
          addFenlei(){
            this.tianjiafenleiDialog =true
            this.name=''
          },
          //弹窗确认添加分类
          makeSureAdd(){
            this.tianjiafenleiDialog =false
            axios.post(`/own/category/update`,{name:this.name}).then(response => {
              if(response.data.msg.code == 0){
                this.$message.success('添加分类成功');
                this.tianjiafenleiDialog =false
                this.fenleiguanliTab()

              }else{
                this.$message.error(response.data.msg.info);
                this.fenleiguanliTab()
              }
            });
          },
          //弹窗取消添加分类
          makeSureUndo(){
            this.tianjiafenleiDialog =false
          },
          //选择分类
          selectCategory(row){
            this.piliangfenleiDialog =true
            this.categorytitle='选择分类'
            this.rowShangpinId = row.id
            this.checkList = row.category.map((item)=>{
              return item.name
            })

            //获取所有分类
            axios.get('/own/category/list',{params:{not_have_public:1}}).then((response)=>{
              if (response.data.msg.code == 0) {
                console.log('response.data.data.data333',response.data.data.data)
                this.checkedList = response.data.data.data
              } else {
                this.$message.error(response.data.msg.info);
              }
            })

          },
          //删除分类
          deleteCategory(row){
            console.log('row66',row)
            axios.post(`/own/category/delete`,{id:row.id}).then(response => {
              if(response.data.msg.code == 0){
                this.$message.success('已成功删除分类');
                this.fenleiguanliTab()

              }else{
                this.$message.error(response.data.msg.info);
                this.fenleiguanliTab()
              }
            });
          },
          //批量分类
          piliangFenlei(){
            // console.log('所有选中的id2',this.selectExportId)
            this.piliangfenleiDialog =true
            this.categorytitle='批量分类'
            //获取所有分类
            axios.get('/own/category/list',{params:{not_have_public:1}}).then((response)=>{
              if (response.data.msg.code == 0) {
                this.checkedList = response.data.data.data
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          },
          //选择分类/批量分类 弹窗确认
          makeSureAddP(){
            this.piliangfenleiDialog =false
            // console.log('checkList',this.checkList)
            if(this.categorytitle=='选择分类'){
                axios.post(`/own/category/link/update`,{page_id:this.rowShangpinId.toString(),category_id:this.checkedAlarmObjIdArr.join(',')}).then(response => {
                if(response.data.msg.code == 0){
                  this.$message.success('选择分类成功');
                  this.piliangfenleiDialog =false
                  this.getlist()
                }else{
                  this.$message.error(response.data.msg.info);
                  this.getlist()
                }
              });
            }
            if(this.categorytitle=='批量分类'){
              // console.log('this.selectExportId',this.selectExportId)
              axios.post(`/own/category/link/update`,{page_id:this.selectExportId.join(','),category_id:this.checkedAlarmObjIdArr.join(','),is_batch:1}).then(response => {
                if(response.data.msg.code == 0){
                  this.$message.success('批量分类成功');
                  this.piliangfenleiDialog =false
                  this.getlist()

                }else{
                  this.$message.error(response.data.msg.info);
                  this.getlist()
                }
              });
            }


          },
          //弹窗取消批量分类
          makeSureUndoP(){
            this.piliangfenleiDialog =false
            this.getlist()
          },
          getRowKeys(row) {
            return row.id;
          },
          getRowKeys2(row) {
            return row.id;
          },
          //
          handleCheckBox(rows, row) {
            if (this.selectExportId.find((i) => i === row.id)) {
              this.selectExportId = this.selectExportId.filter((i) => i != row.id);
            } else {
              this.selectExportId.push(row.id);
            }
          },
          // 全选方法
          handleSelectAll(rows) {
            if (rows.length) {
              rows.forEach((row) => {
                if (!this.selectExportId.find((item) => item == row.id)) {
                  this.selectExportId.push(row.id);
                }
              });
            } else {
              this.list.forEach((row) => {
                this.selectExportId = this.selectExportId.filter(
                  (item) => item != row.id
                );
              });
            }
          },
          //点击当前商品数量
          dangqianGoodsNum(row){

            this.rexiaoDialog2 = true
            this.titlename= row.name
            this.selectExportId2=[]
            this.fenleiId = row.id
            this.fenleinname = row.name
            this.getlist2(row.id)   //传分类id
          },
          //热销产品确认
          makeSureAddR(){
            console.log('this.selectExportId2',this.selectExportId2)
            this.rexiaoDialog2 =false

          },
          //热销产品取消
          makeSureUndoR(){
            this.rexiaoDialog2 =false
          },
          changeObj() {
            this.checkedAlarmObjIdArr = [];
            for (let i = 0; i < this.checkList.length; i++) {
              for (let j = 0; j < this.checkedList.length; j++) {
                if (this.checkList[i] === this.checkedList[j].name) {
                  this.checkedAlarmObjIdArr.push(this.checkedList[j].id);
                }
              }
            }
            // console.log('1010101010',this.checkedAlarmObjIdArr) // 输出当前选中的所有checkbox的value值
            // console.log('20202020',this.checkedAlarmObjIdArr.join(','))
          },
          handleClose(){
            this.checkList=[]
          },

          handleEnter: _.debounce(function(row) {
            console.log(this)
            var that = this
              axios.post(`/own/category/update`,{name:row.name,id:row.id}).then(response => {
                if(response.data.msg.code == 0){
                  that.$message.success('分类名称修改成功');
                  that.fenleiguanliTab()
                }else{
                  if(response.data.msg.info == '分类名称不能为空'){

                  }else{
                    that.$message.error(response.data.msg.info);
                  }

                  that.fenleiguanliTab()
                }
              });
          }, 1000),

          //按回车键执行
          // handleEnter(row) {
          //   // console.log('保存行:', row);
          //   axios.post(`/own/category/update`,{name:row.name,id:row.id}).then(response => {
          //     if(response.data.msg.code == 0){
          //       this.$message.success('分类名称修改成功');
          //       this.fenleiguanliTab()
          //     }else{
          //       this.$message.error(response.data.msg.info);
          //       this.fenleiguanliTab()
          //     }
          //   });
          // },
          //热销产品弹窗列表获取
          getlist2:function(id){
            this.search2.category_id = id
            axios.get('/own/category/page/list',{params:this.search2}).then((response)=>{
              if (response.data.msg.code == 0) {
                this.list2 = response.data.data.data
                this.total2 = response.data.data.total
                this.$nextTick(()=>{
                  this.list2.forEach((item, index) => {
                    if (this.selectExportId2.findIndex((i) => i === item.id) >= 0) {
                      this.$refs.typeTable.toggleRowSelection(
                        this.$refs.typeTable.data[index],
                        true
                      );
                    }
                  })
                })
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          },
          handleCheckBox2(rows, row) {
            if (this.selectExportId2.find((i) => i === row.id)) {
              this.selectExportId2 = this.selectExportId2.filter((i) => i != row.id);
            } else {
              this.selectExportId2.push(row.id);
            }
          },
          // 全选方法
          handleSelectAll2(rows) {
            if (rows.length) {
              rows.forEach((row) => {
                if (!this.selectExportId2.find((item) => item == row.id)) {
                  this.selectExportId2.push(row.id);
                }
              });
            } else {
              this.list.forEach((row) => {
                this.selectExportId2 = this.selectExportId2.filter(
                  (item) => item != row.id
                );
              });
            }
          },
          //热销产品弹窗翻页
          fanye2(val){
              this.search2.page = val
              this.getlist2(this.fenleiId)
          },
          //热销产品批量删除
          rexiaoPiliangshanchu(){
            console.log('该分类id,热销产品弹窗所有选中的id',this.fenleiId,this.selectExportId2.length)
            if(this.selectExportId2.length==0){
              this.$message({
              message: '请选择商品',
              type: 'warning'
            });
            }
            if(this.selectExportId2.length!=0){
              axios.post(`/own/category/link/all/clear`,{page_id:this.selectExportId2.join(','),category_id:this.fenleiId}).then(response => {
                if(response.data.msg.code == 0){
                  this.$message.success('批量删除成功');
                  this.getlist2(this.fenleiId)
                }else{
                  this.$message.error(response.data.msg.info);
                  this.getlist2(this.fenleiId)
                }
              });
            }


          },

          // 行拖拽
          rowDrop() {
            // 要侦听拖拽响应的DOM对象（数据存储在.el-table__body-wrapper > .el-table__row > tbody标签中（el-table的数据部分的“最外层”class名为el-table__body-wrapper））
            const tbody = document.querySelector('.el-table__body-wrapper tbody');
            const that = this;
            Sortable.create(tbody, {



              // 结束拖拽后的回调函数
              onEnd({ newIndex, oldIndex }) {

                if(that.all == 0){
                  console.log(that.list)
                  const currentRow = that.list.splice(oldIndex, 1)[0]; // 将oldIndex位置的数据删除并取出，oldIndex后面位置的数据会依次前移一位
                  that.list.splice(newIndex, 0, currentRow); // 将被删除元素插入到新位置（currRow表示上面的被删除数据）
                  let arr = []
                  that.list.forEach((item,index)=>{
                    let obj = {
                      order_page_id:item.id,
                      sort:index+1
                    }
                    arr.push(obj)
                  })

                  axios.post('/own/page/sort',{data:arr}).then((response)=>{
                    if (response.data.msg.code == 0) {
                      // that.loading = true
                      // location.reload()
                    } else {
                      that.$message.error(response.data.msg.info);
                    }
                  })
                }else{

                    const currentRow = that.list1.splice(oldIndex, 1)[0]; // 将oldIndex位置的数据删除并取出，oldIndex后面位置的数据会依次前移一位
                    that.list1.splice(newIndex, 0, currentRow); // 将被删除元素插入到新位置（currRow表示上面的被删除数据）
                    let arr = []
                    that.list1.forEach((item,index)=>{
                      let obj = {
                        category_id:item.id,
                        sort:index+1
                      }
                      arr.push(obj)
                    })
                    axios.post('/own/category/sort',{data:arr}).then((response)=>{
                    if (response.data.msg.code == 0) {
                      // that.loading = true
                      // location.reload()

                    } else {
                      that.$message.error(response.data.msg.info);
                    }
                  })
                }




              }
            })
          },
          //分类管理列表分类名称input是否禁用
          isdisabledShow(row){

            if(row.site_id=='0'){
              return true
            }else{
              return false
            }
          }





        }
    }
</script>


<style lang="less">
/* 自定义内容的区域的颜色 */
// .el-tooltip__popper {
//   background: #000000 !important;
//   border-radius: 20px;
//   opacity: 0.6;
//   width:100px;
//   height:36px;
//   display:flex;
//   text-align:center;
//   align-items:center;
//   justify-content: center;
// }
.dropdown-triangle {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black; /* 这里的颜色就是三角形的颜色 */
  content: "";
  display: inline-block;
  margin-left: 15px;
}
.fenleiguanli-tooltip {
  border-radius: 62px;
}
</style>
<style scoped>
.el-table {
  .el-table__header-wrapper {
    th.el-table__cell:first-child {
      border-radius: 20px 0 0 20px;
    }
    th.el-table__cell:last-child {
      border-radius: 0 20px 20px 0;
    }
  }
  .el-table__row {
    td.el-table__cell {
      .el-input__inner {
        background-color: transparent !important;
        border-radius: 8px !important;
      }
    }
    td.el-table__cell:first-child {
      border-radius: 20px 0 0 20px;
    }
    td.el-table__cell:last-child {
      border-radius: 0 20px 20px 0;
    }
  }
}
.t_choose_tab_box{
   display: flex;

 }
 .t_tab_title{
   color: #020C1D;
   font-weight: bold;
   font-size: 20px;
   cursor: pointer;
 }
 .t_tab_title_lei{
   color: #005AFF;
   font-weight: bold;
   font-size: 20px;
 }
 .t_under_line{
   width: 30px;
   height: 2px;
   background-color: #F6F8FB;
   margin-top: 10px;
 }
 .t_under_line_lei{
   background-color: #005AFF;
   width: 30px;
   height: 4px;
   margin: 0 auto;
   margin-top: 16px;
   border-radius: 43px;
 }
 /deep/ .dialog1 .el-dialog__body  {
  background-color: #F6F8FB;
}
/deep/ .dialog1 .el-dialog__header{
  background-color: #F6F8FB;
}
.el-dropdown-menu {
  /* 添加滚动条 */
  overflow: auto;
  /* 最大高度 */
  max-height: 150px;
  /* 隐藏x轴上的滚动条 */
  overflow-x: hidden;
}
.el-dropdown-menu::-webkit-scrollbar {
  /* 设置滚动轴宽度 */
  width: 5px;
  background-color: #f5f5f5;
}
.el-dropdown-menu::-webkit-scrollbar-track {
  /* 覆盖滑道样式 */
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

.el-dropdown-menu::-webkit-scrollbar-thumb {
  /* 覆盖滑块样式 */
  background-color:rgb(96, 98, 102);
  border-radius: 3px;
}

::v-deep .el-dropdown {
position: fixed;
bottom: 10px;
right: 10px;
/* z-index: 9999999999; */
}

</style>
